<template>
  <div>
    <div
      class="button_list"
      @click.stop
      v-if="order.ignore == 0 && order.status_ext != 5"
    >
      <div
        v-if="
          [20, 30, 40, 50, 100].some((item) => item == order.status_ext) &&
          order.order_type_ext == 601
        "
        @click="
          $utils.toUrl(
            '/service-home/service-order/balance?title=订单尾款&order_id=' +
              order.id
          )
        "
        class="bt"
      >
        设置尾款
      </div>

      <template v-if="order.status_ext == '20' || order.status_ext == '30'">
        <div @click="onPhone(order)" class="bt">拨号</div>
        <div @click="onDaohang(order)" class="bt">导航</div>
      </template>

      <!-- 待抢单按钮 -->
      <template v-if="order.status_ext == '10'">
        <div @click="$emit('onQiangdan', order, '2')" class="bt">忽略</div>
        <div @click="$emit('onQiangdan', order, '1')" class="bt bt_1">
          立即抢单
        </div>
      </template>
      <!-- 待接单 -->
      <template v-else-if="order.status_ext == '15'">
        <div @click="$emit('onStatus', order, '2')" class="bt">拒绝</div>
        <div @click="$emit('onStatus', order, '1')" class="bt bt_1">接单</div>
      </template>

      <!-- 待出发按钮 -->
      <template v-else-if="order.status_ext == '20'">
        <div @click="$emit('onStatus', order, '3')" class="bt bt_1">
          确认出发
        </div>
      </template>

      <!-- 已到达 -->
      <template v-else-if="order.status_ext === '30'">
        <div @click="$emit('onStatus', order, '4')" class="bt bt_1">已到达</div>
      </template>
      <!-- 待服务 -->
      <template v-else-if="order.status_ext === '40'">
        <div @click="$emit('onStatus', order, '5')" class="bt bt_1">
          开始服务
        </div>
      </template>
      <!-- 进行中50 -->

      <!-- 已完成100 -->
      <template v-else-if="order.status_ext == '100'">
        <div
          v-if="order.base_order_id == 0"
          @click="
            $utils.toUrl(
              `/service-home/service-order/balance?title=订单加钟&order_id=${order.id}`
            )
          "
          class="bt bt_1"
        >
          加钟
        </div>
        <div @click="$emit('onStatus', order, '11')" class="bt bt_1">删除</div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    order: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    onPhone(order) {
      this.$utils.makePhoneCall(order.mobile);
    },
    onDaohang(order) {
      let address_data = JSON.parse(order.address_data);
      uni.openLocation({
        latitude: address_data.latitude - 0,
        longitude: address_data.longitude - 0,
        address: address_data.detail,
        success: (result) => {},
        fail: () => {
          this.$utils.toast("获取定位失败。");
        },
        complete: () => {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.button_list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .bt {
    margin-top: 24rpx;
    margin-left: 10rpx;
    padding: 12rpx 24rpx;
    font-size: 24rpx;
    background: #f2f2f2;
    border-radius: 100rpx;
  }
  .bt_1 {
    background: #fdf1f0;
    color: #f0250e;
  }
}
</style>
